<div class="row" *ngIf="whitelist$ | async as whitelist">
  <div class="g-top-button-group">
    <button class="btn btn-danger ml-3" (click)="removeWhitelist(whitelist.id)">移出白名单</button>
  </div>
  <div class="col-xl-12">
    <m-card autoHeight>
      <ng-container card-head>
        <div class="card-head">
          <div class="g-card-title">设备信息</div>
          <m-button-icon icon="flaticon-edit" (click)="openEdit(whitelist)">编辑设备</m-button-icon>
        </div>
      </ng-container>
      <div class="row">
        <div class="info-whitelist">
          <div class="row body">
            <div class="col-6 col-lg-4">设备别名：{{ whitelist.alias_name }}</div>
            <div class="col-6 col-lg-4">添加时间：{{ whitelist.created_at | date:'yyyy-MM-dd  HH:mm' }}</div>
            
            <div class="col-6 col-lg-4">编辑时间：
              <ng-container *ngIf="whitelist.updated_at!=='0001-01-01T00:00:00Z'">
                {{ whitelist.updated_at | date:'yyyy-MM-dd HH:mm'}}
              </ng-container>
            </div>
            <div class="col-6 col-lg-4">有效期至：
              <ng-container *ngIf="whitelist.expiry_date==='2120-01-01T00:00:00Z' else elseTemplate" >
                永久有效
              </ng-container>
              <ng-template #elseTemplate>
                {{ whitelist.expiry_date | date:'yyyy-MM-dd HH:mm' }}
              </ng-template>
            </div>
            <div class="col-6 col-lg-4">VendorID:<span class="ml-3">{{ whitelist.vendor_id }}</span> </div>
            <div class="col-6 col-lg-4">ProductID:<span class="ml-3">{{ whitelist.product_id }}</span> </div>
            <div class="col-6 col-lg-12">SerialNumber:<span class="ml-3 ellipsis" [attr.alt]="whitelist.serial_number">{{ whitelist.serial_number }}</span></div>
            <div class="col-6 col-lg-12">备注: {{ whitelist.remarks }}</div>
          </div>
        </div>
      </div>
    </m-card>
    <m-card>
      <ng-container card-head>
        <div class="card-head">
          <div class="g-card-title">终端授权</div>
        </div>
      </ng-container>
      <ng-container card-body-head>
        <div class="body-head row mb-3">
          <div class="type-filter">
            <mat-select class="form-control selected" [ngModel]="activeAreaID" (ngModelChange)="onActiveAreaID($event)">
              <mat-option [value]="0">全部区域</mat-option>
              <ng-container *ngIf="areaList$ | async as areaList">
                <mat-option *ngFor="let area of areaList.list" [value]="area.id">
                  {{ area.name }}</mat-option>
              </ng-container>
            </mat-select>
            <mat-select class="form-control selected" [ngModel]="isAuthorized" (ngModelChange)="onIsAuthorized($event)">
              <mat-option [value]="-1">授权状态</mat-option>
              <mat-option [value]="0">未授权</mat-option>
              <mat-option [value]="1">已授权</mat-option>
            </mat-select>
            <div class="search">
              <div class="search-input">
                <input type="text" class="form-control" placeholder="请输入终端别名..." [ngModel]="searchKey" #keyword
                  (keyup.enter)="onSearchKey(keyword.value, true)" (blur)="onSearchKey(keyword.value, false)" />
              </div>
              <div>
                <button class="btn btn-light m-btn m-btn--icon m-btn--icon-only m-btn--pill" (click)="startSearch()">
                  <i class="flaticon-search"></i>
                </button>
              </div>
            </div>

          </div>
        </div>
        <m-data-table *ngIf="authorizedList$ | async as result" [data]="result.list" [result]="result"
          [selection]="selection" [sortUseRouteQueryParam]="true">
          <ng-container mDataTableColumn header="终端别名">
            <ng-template let-pc_name="pc_name">
              <td>{{pc_name}}</td>
            </ng-template>
          </ng-container>
          <ng-container mDataTableColumn header="状态">
            <ng-template let-pc_status="pc_status">
              <td>
                <m-pc-status [status]="pc_status"></m-pc-status>
              </td>
            </ng-template>
          </ng-container>
          <ng-container mDataTableColumn header="授权">
            <ng-template let-is_authorized="is_authorized">
              <td>
                <m-auth-status [status]="is_authorized"></m-auth-status>
              </td>
            </ng-template>
          </ng-container>
          <ng-container mDataTableColumn header="操作">
            <ng-template let-is_authorized="is_authorized" let-auth>
              <td>
                <button mat-icon-button [matMenuTriggerFor]="editMenu">
                  <mat-icon>edit</mat-icon>
                </button>
                <mat-menu #editMenu>
                  <button mat-menu-item *ngIf="!is_authorized" (click)="modifyAuth(auth)">设为已授权</button>
                  <button mat-menu-item *ngIf="is_authorized" (click)="modifyAuth(auth)">设为未授权</button>
                </mat-menu>
              </td>
            </ng-template>
          </ng-container>
          <m-pagination [length]="result.total" [pageSize]="result.pageSize">
            <ng-container>
                <button class="btn btn-sm btn-secondary mr-3" (click)="selection.select(result.list)">
                  全选
                </button>
                <button class="btn btn-sm btn-secondary" [matMenuTriggerFor]="batchMenuRef">
                  批量操作
                </button>
                <mat-menu #batchMenuRef>
                  <button mat-menu-item (click)="patchAuth(1)">设为已授权</button>
                  <button mat-menu-item (click)="patchAuth(0)">设为未授权</button>
                </mat-menu>
            </ng-container>
          </m-pagination>
        </m-data-table>
      </ng-container>
    </m-card>

  </div>
</div>